<template>
    <div class="not-found">
        <a-result status="404" title="404" sub-title="抱歉，您访问的页面不存在">
            <template #extra>
                <a-space>
                    <a-button type="primary" @click="$router.push('/')">
                        返回首页
                    </a-button>
                    <a-button @click="$router.go(-1)">
                        返回上页
                    </a-button>
                </a-space>
            </template>
        </a-result>

        <div class="suggestions">
            <h3>您可以尝试：</h3>
            <a-list>
                <a-list-item>
                    <a @click="$router.push('/')">访问首页</a>
                </a-list-item>
                <a-list-item>
                    <a @click="$router.push('/course')">浏览课程</a>
                </a-list-item>
                <a-list-item>
                    <a @click="$router.push('/user')">个人中心</a>
                </a-list-item>
            </a-list>
        </div>
    </div>
</template>

<script setup lang="ts">
// 404页面逻辑
</script>

<style scoped>
.not-found {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    padding: 24px;
}

.suggestions {
    margin-top: 48px;
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.suggestions h3 {
    margin-bottom: 16px;
    color: #333;
    text-align: center;
}

.suggestions .ant-list-item {
    padding: 8px 0;
    border-bottom: none;
}

.suggestions .ant-list-item:last-child {
    border-bottom: none;
}

.suggestions a {
    color: #1890ff;
    text-decoration: none;
}

.suggestions a:hover {
    color: #40a9ff;
}
</style>